<template>
	<div class="util">
		<el-button type="primary" plain @click="add(1,0)">
			<el-icon><Plus /></el-icon>
			<span>添加权限</span>
		</el-button>
	</div>
    <div>
		
		<el-table :data="tableData" row-key="id">
			<el-table-column label="名称" prop="name"></el-table-column>
			<el-table-column show-overflow-tooltip label="说明" prop="description"></el-table-column>
			<el-table-column show-overflow-tooltip label="菜单路径" prop="path"></el-table-column>
			<el-table-column width="250px">
				<template #default = "scope">
					<el-button v-if="scope.row.type===1"  plain size="small" @click="add(scope.row.level + 1,scope.row.id)">添加下一级</el-button>
					<el-button type="primary" plain size="small" @click="update(scope.row.id)">修改</el-button>
					<el-button type="danger" plain size="small" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
		
<el-dialog v-model="dialog.show" 
		:title="dialog.title" 
		width="450px"
		:close-on-click-modal = "false">
	<Add
	 v-if="dialog.show"
	 @getTableData = "getTableData" 
	 v-model:show="dialog.show" 
	 :level="dialog.level"

	 :parentId="dialog.parentId"

	 :id="dialog.id"
	 /> 
</el-dialog>
</template>

<script setup>
import { Plus} from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import Add from './add'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'

const dialog = reactive({
	show: false,
	title: '',
	id: null,
	level: null,
	parentId: null
})
const tableData = ref([])
const params = reactive({

})


function add(level,parentId){
	dialog.id = null
	dialog.title = "添加权限"
	dialog.level = level
	dialog.parentId = parentId
	dialog.show = true	
}
function update(id){
	dialog.id = id
	dialog.title = "修改权限"

	dialog.level = null
	dialog.parentId = null

	dialog.show = true
}


function del(id) {
	ElMessageBox.confirm('删除之后无法恢复确定要删除吗','警告',{
		 type: 'warning'
	}).then(() => {
		post(url.del,{id}, content => {
			getTableData()
		})
	}).catch(() => {})
}


function getTableData(){
	get(url.list,params,content => {
		tableData.value = content
	})
}
getTableData()
</script>
<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
    padding-left: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.span{
			font-size: 14px;
			margin-left: 20px;
		}
	}

}
</style>